<script setup lang="ts">
defineOptions({
  name: "MACHINE_FFU"
});

import { queryEqpById } from "@/api/equip/archive";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const url = ref<string>(`${import.meta.env.VITE_FFU_BASE_URL}/ifp-topology/index.html#/`);
let iframeRef = ref<any>(null);
let iframeWindow = null;
onMounted(() => {
  iframeWindow = iframeRef.value.contentWindow;
  sendMessage();
});
window.addEventListener("message", async function (e) {
  if (e.data) {
    try {
      const res = JSON.parse(e.data);
      if (res.id) {
        console.log(res.id);
        const eqpRes = await queryEqpById({ eqpId: res.id, showHidden: true });
        // console.log(`output->eqpRes`, eqpRes);
        router.push({
          path: "/machine/operation/chemicalFilterReplace/workOrderManage",
          query: { isAdd: "ADD", categoryId: eqpRes.categoryId, systemCode: eqpRes.systemCode }
        });
      }
    } catch (e) {}
  }
});
function sendMessage() {
  var data = {
    facCode: localStorage.getItem("facCode") || ""
  };
  iframeRef.value.onload = function () {
    iframeWindow.postMessage(JSON.stringify(data), "*");
  };
}
</script>

<template>
  <div class="iframe-content">
    <iframe ref="iframeRef" :src="url" width="100%" height="100%" frameborder="0" />
  </div>
</template>

<style lang="scss" scoped>
.iframe-content {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
